<template>
  <el-row :gutter="12">
    <el-col :span="10">
      <channel-column
              ref="channelColumnRef"
              :channel-column-config="channelColumnConfig"
              :query="query"
              :current-corpid="currentCorpid"
              @getMediaList="getMediaList"
      />
    </el-col>
    <el-col :span="14">
      <channel-column-media
              ref="channelColumnMediaRef"
              :channel-column-config="channelColumnConfig"
              :query="query"
              :current-corpid="currentCorpid"
      />
    </el-col>
  </el-row>
</template>

<script>
  import {reactive, ref} from 'vue'
  import {useRoute} from 'vue-router'
  import {useStore} from 'vuex'
  import ChannelColumn from "../components/projectChannel/ChannelColumn";
  import ChannelColumnMedia from "../components/projectChannel/ChannelColumnMedia";
  export default {
    name: "ContentProjectChannel",
    components: {ChannelColumn, ChannelColumnMedia},
    setup() {
      const route = useRoute()
      const store = useStore()
      const query = route.query
      const currentCorpid = store.getters.corpinfo.corpid
      const channelColumnConfig = reactive({
        channelid: undefined,
        channelName: undefined,
        columnid: undefined,
        columnName: undefined,
        columnSelected: false
      })
      const channelColumnRef = ref(null)
      const channelColumnMediaRef = ref(null)
      const resetChannelColumnConfig = () => {
        channelColumnConfig.channelid = undefined
        channelColumnConfig.channelName = undefined
        channelColumnConfig.columnid = undefined
        channelColumnConfig.columnName = undefined
        channelColumnConfig.columnSelected = false
      }

      const getMediaList = () => {
        channelColumnMediaRef.value.queryList.page = 1
        channelColumnMediaRef.value.getMediaList()
      }

      const init = () => {
        resetChannelColumnConfig()
        channelColumnRef.value.init()
        channelColumnMediaRef.value.init()
      }
      return {
        init,
        query,
        channelColumnConfig,
        currentCorpid,
        channelColumnRef,
        channelColumnMediaRef,
        getMediaList
      }
    }
  }
</script>

<style lang="scss">
  .el-table__empty-block{
    min-height: 0;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-table .el-table__expanded-cell{
    padding:0;
  }
</style>
